<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>宾馆管理系统表格</title>
		<script src="js/jquery-3.6.0.min.js" type="text/javascript"charset="utf-8"></script>
		<script type="text/javascript">
			function add(){
				let hotel1 = $("#hotel1").val();
				let hotel2 = $("#hotel2").val();
				let hotel3 = $("#hotel3").val();
				let hotel4 = $("#hotel4").val();
				let hotel5 = $("#hotel5").val();
				
				let count =$("tbody>tr").length +1;
				
				let rowItem = `<tr>
				      <td>${hotel1}</td>
					  <td>${hotel2}</td>
					  <td>${hotel3}</td>
					  <td>${hotel4}</td>
					  <td>${hotel5}</td>
					  <td><button type="button" onclick="del(this)">删除</button></td>
				</tr> `
				$("tbody").append(rowItem);
			}
			function del(btn){
				$(btn).parent().parent().remove();
			}
		</script>
	</head>
	<body>
		<form>
			财务管理：<input type="text" name="" id="hotel1" value="" /><br/>
			员工管理：<input type="text" name="" id="hotel2" value="" /><br/>
			预定管理：<input type="text" name="" id="hotel3" value="" /><br/>
			客户管理：<input type="text" name="" id="hotel4" value="" /><br/>
			系统设置：<input type="text" name="" id="hotel5" value="" /><br/>
			<button type="button" onclick="add()">添加</button>
		</form>
		<table border="1px" cellspacing="0" cellpadding="0">
			<thead>
				<th>财务管理</th>
				<th>员工管理</th>
				<th>预定管理</th>
				<th>客户管理</th>
				<th>系统设置</th>
			</thead>
			<tbody>
			</tbody>
		</table>
	</body>
</html>